<template>
  <div  class="mt35">
      <el-row :gutter="25">
        <el-col :span="7" id="inner">
            <div>
              <h3  class="title-sufaxuanze">算法选择</h3>
              <i  v-if="this.sfbhFlag=='2'"  class="el-icon-arrow-left jiantou" @click="suanFaBianHuan('1')"></i>
              <i v-if="this.sfbhFlag=='1'"  class="el-icon-arrow-right jiantou" @click="suanFaBianHuan('2')"></i>
            </div>
            <!--       第一列-->
          <div style="overflow:hidden;height: 100px">
          <transition
            enter-active-class="animated animate__lightSpeedInLeft">
            <div v-if="this.sfbhFlag=='1'" class="mt20" style="display: inline-block">
              <div class="suanfa"  @click="selectAiType(1)" :class="{'showd':this.typeFlag==1}">
                  <img src="@/assets/images/bhjc_1.png" class="suanfatuxiang"/>
                  <h3 class="suanfatext">变化检测</h3>
              </div>
              <div class="suanfa ml25" @click="selectAiType(2)" :class="{'showd':this.typeFlag==2}">
                <img src="@/assets/images/mbtq_1.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">目标提取</h3>
              </div>
              <div class="suanfa ml25" @click="selectAiType(3)" :class="{'showd':this.typeFlag==3}">
                <img src="@/assets/images/mbjc_1.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">目标检测</h3>
              </div>
              <div class="suanfa ml25" @click="selectAiType(4)" :class="{'showd':this.typeFlag==4}">
                <img src="@/assets/images/dwfl_1.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">地物分类</h3>
              </div>
            </div>
              </transition>
<!--            第二列-->

          <transition
            enter-active-class="animated animate__lightSpeedInRight"
            >
            <div v-if="this.sfbhFlag=='2'" class="mt20" style="display: inline-block">
              <div class="suanfa"  @click="selectAiType(5)" :class="{'showd':this.typeFlag==5}">
                <img src="@/assets/images/cljc_1.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">车辆检测</h3>
              </div>
              <div class="suanfa ml25" @click="selectAiType(6)" :class="{'showd':this.typeFlag==6}">
                <img src="@/assets/images/yyfg.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">语义分割</h3>
              </div>
              <div class="suanfa ml25" @click="selectAiType(7)" :class="{'showd':this.typeFlag==7}">
                <img src="@/assets/images/cjfl.png" class="suanfatuxiang"/>
                <h3 class="suanfatext">场景分类</h3>
              </div>
            </div>
            </transition >
          </div>
          <div class="mt30">
            <h3 class="title-sufaxuanze" style="display: inline-block">数据上传</h3>
            <template v-if="device!=='mobile'" >
                <screenfull id="screenfull" class="right-menu-item hover-effect quanpin" />
            </template>
          </div>
          <el-card shadow="always" class="mt10 upload-demo">
            <el-button v-if='this.fileList.length>0 && this.srcList.length>0'
                       type="text" style="margin-left: 300px" @click="contrast">一键对照</el-button>
            <el-upload
              :style="this.upload_height"
              class="upload-demo"
              ref="upload"
              :headers="headers"
              drag
              :action="uploadImgUrl"
              :on-success="handleUploadSuccess"
              :before-upload="handleBeforeUpload"
              :limit="limit"
              :on-error="handleUploadError"
              :on-exceed="handleExceed"
              name="file"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传png/jpg/jpeg格式的文件</div>
              <span v-if="typeFlag==1" class="el-upload__tip" style="color: #FF6969" >第一张默认为Time1，第二张为Time2</span>
              <span v-if="selectAiTypeFlag==false" class="el-upload__tip " style="color: #FF6969"  >请先选择算法</span>
            </el-upload>
            <el-button class="mt5" style="width: 100%;opacity: 0.8" type="primary" @click="submit">立即上传</el-button>
          </el-card >
        </el-col>
        <el-col :span="17">
          <el-card shadow="always" class="mainImage" :class="srcList.length<=0? 'operatorflag' :''">
            <el-image
              :style="resHeight"
              :src="this.srcList[0]"
              :preview-src-list="srcList"
              v-if='this.srcList.length>0'
            >
            </el-image>
            <el-empty v-if='this.srcList.length==0' description="暂无数据" :style="resHeight" :image="emptyurl"></el-empty>
          </el-card>
        </el-col>
      </el-row>
      <el-progress v-if="this.drawer===true" :text-inside="true" :stroke-width="15" :percentage="this.yucejindu"></el-progress>
      <el-dialog title="对照" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form"  label-width="80px">
          <el-form-item label="提交图片">
            <div v-for="(data,index) in this.fileList" style="display: inline-block" class="ml0">
              <el-image
                style="width: 146px; height: 146px;border-radius:4px"
                :src="data.url">
              </el-image>
            </div>
          </el-form-item>
          <el-form-item label="检测结果">
            <div v-for="(data,index) in this.srcList" style="display: inline-block" class="ml0">
              <el-image
                style="width: 146px; height: 146px;border-radius:4px"
                :src="data">
              </el-image>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--        <el-button @click="submitForm">确 定</el-button>-->
          <el-button @click="cancel">返 回</el-button>
        </div>
      </el-dialog>

    <el-drawer
      title="检测进度"
      visible.sync="false"
      :direction="direction"
      size="20%">
      <el-progress :text-inside="true" :stroke-width="20" :percentage="this.yucejindu"></el-progress>
    </el-drawer>
  </div>
</template>

<script>
import 'animate.css';
import {getToken} from "@/utils/auth";
import {detect} from "@/api/system/historyInfo";
import { Loading } from 'element-ui';
import Screenfull from "@/components/Screenfull";
import {mapGetters} from "vuex";
export default {
  name: "index_1",
  components:{Screenfull},
  data(){
    return{
      isShow1:false,
      emptyurl:require('@/assets/images/empty.png'),
      //预测进度
      yucejindu:0,
      //抽屉
      drawer: false,
      //抽屉打开方向
      direction: 'btt',
      //算法变换flag
      sfbhFlag:'1',
      //对比弹出层
      open:false,
      // 图片数量限制
      limit:1,
      // 图片大小
      fileSize:10,
      fileType:['png','jpg','jpeg'],
      //选择了哪一个算法
      typeFlag:"",
      //检测目前的图片个数
      imageNumber:0,
      //刚进入页面有没有选择算法
      selectAiTypeFlag:false,
      //检测完成后的图片
      srcList:[],
      //检测完成后的置信度

      //upload的高
      upload_height:"height: 450px;",
      //动态增加右边card的高度
      resHeight:"height:700px;width:100%",
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: []
    }
  },
  watch:{
    srcList:function (r) {
      if(r.length==1) {
        this.resHeight="height:730px;width:100%"
      }else {
        this.resHeight="height:700px;width:100%"
      }
    },
    fileList:function (r) {
      if(r.length==0 && this.srcList.length>0){
        this.upload_height="height: 485px;"
      }else {
        this.upload_height="height: 450px;"
      }
    }
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
  },
  methods: {
    //延时
    sleep(ms) { //sleep延迟方法2
      var unixtime_ms = new Date().getTime();
      while(new Date().getTime() < unixtime_ms + ms) {}
    },
    //预测进度
    jindu(val){
      let _this=this
      if(val==1){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<97.5){
            _this.yucejindu+=6.5
          }
        },1000)

      }else if(val==2){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<97.5){
            _this.yucejindu+=6.5
          }
        },1000)

      }else if (val==3){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<100){
            _this.yucejindu+=20
          }
        },1000)

      }else if(val==4){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<99){
            _this.yucejindu+=33
          }
        },1000)
      }else if(val==5){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<100){
            _this.yucejindu+=20
          }
        },1000)
      }else if(val==6){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<96){
            _this.yucejindu+=8
          }
        },1000)
      }else if(val==7){
        let timer=setInterval(function (){
          if(_this.srcList.length==1){
            _this.yucejindu=0
            clearInterval(timer);
          }
          if(_this.srcList.length==0 && _this.yucejindu<97.5){
            _this.yucejindu+=7.5
          }
        },1000)
      }
    },
    //下一页算法
    suanFaBianHuan(val){
      this.sfbhFlag=val;
    },
    //选择算法
    selectAiType(val){
      this.fileList=[]
      this.srcList=[]
      this.selectAiTypeFlag=true
      this.typeFlag=val
      this.accuracy=""
      if(val==1){
        this.limit=2
      }else {
        this.limit=1
      }
    },
    submit(){
      if(this.selectAiTypeFlag==false){
        this.$modal.msgWarning("请选择算法!")
        this.fileList=[]
        return false;
      }
      if(this.fileList.length<1){
        this.$modal.msgWarning("请选择图片!")
        return false;
      }
      if(this.fileList.length<2 && this.typeFlag==1){
        this.$modal.msgWarning("变化检测需要提交两张照片!")
        return false;
      }
      this.srcList=[]
      // let loadingInstance1 = Loading.service({ fullscreen: true ,text:"正在检测中，请耐心等待..."});
      this.drawer=true;
      this.jindu(this.typeFlag);
      detect(this.fileList).then(res=>{
        this.srcList.push(this.baseUrl+res.msg)
        this.drawer=false;
        // loadingInstance1.close()
      }).catch(e=>{
        this.yucejindu=0;
        this.drawer=false;
        // loadingInstance1.close()
      })


    },
    // 删除图片
    handleRemove(file, fileList) {
      const findex = this.fileList.map(f => f.name).indexOf(file.name);
      if(findex > -1) {
        this.fileList.splice(findex, 1);
        this.$emit("input", this.listToString(this.fileList));
      }
    },
    // 上传成功回调
    handleUploadSuccess(res) {
      this.fileList.push({ name: res.originalFilename, url: this.baseUrl+res.fileName ,filePath:res.fileName,typeFlag:this.typeFlag});
      this.$modal.closeLoading();
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      let isImg = false;
      if (this.fileType.length) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        isImg = this.fileType.some(type => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
      } else {
        isImg = file.type.indexOf("image") > -1;
      }

      if (!isImg) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
        return false;
      }
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传图片，请稍候...");
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传图片失败，请重试");
      this.$modal.closeLoading();
    },
// 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].url.replace(this.baseUrl, "") + separator;
      }
      return strs != '' ? strs.substr(0, strs.length - 1) : '';
    },
    contrast(){
      this.open=true;
    },
    //关闭弹出层
    cancel(){
      this.open=false;
    }
  }
}
</script>

<style>
.suanfa{
  text-align: center;
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #1A2A5D;
  border-radius: 8px;
  opacity: 0.6;
  border: 2px solid #53618F;
}
.showd{
  text-align: center;
  width: 80px;
  height: 80px;
  background: #2178FF;
  border-radius: 8px;
}
.sss-enter-active {            /*进入时执行的动画*/
  animation: mmm .5s;
}
/*.sss-leave-active {             !*离开时执行的动画*!*/
/*  animation: mmm .5s reverse;  !*reverse 进入时0%到100%,离开时100%到0%*!*/
/*}*/
@keyframes mmm {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.title-sufaxuanze{
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #FFFFFF;
  display: inline;
}
.jiantou{
  width: 21px;
  height: 21px;
  background: #1A2A5D;
  border-radius: 4px;
  opacity: 0.6;
  border: 2px solid ;
  color: #ffffff;
  position: absolute;
  left: 380px;
}
.quanpin{
  text-align: center;
  width: 22px;
  height: 22px;
  background: #1A2A5D;
  border-radius: 4px;
  opacity: 0.6;
  border: 2px solid ;
  color: #ffffff;
  position: absolute;
  display: inline-block;
  top: 164px;
  left: 380px;
}
.suanfatuxiang{
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.suanfatext{
  color: #FFFFFF;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.upload-demo{
  background-color: #1B2B5F;
  border-radius: 4px;
  opacity: 0.9;
}
.mainImage{
  background: #1B2B5F;
  border-radius: 8px;
}
.el-popover{
  background: #1B2B5F !important;
  border-radius: 8px;
  color: #FFFFFF;
}
.el-upload-dragger{
  background: #1B2B5F !important;
  color: #FFFFFF;
}

.el-upload-list--picture .el-upload-list__item {
  background: #1B2B5F !important;
  color: #FFFFFF;
}
.operatorflag{
  opacity: 0.9;
}

</style>
